<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>ES6 模块化</title>
  </head>
  <body>
    <script type="module">
      //1. 通用的导入方式
      // 引入 m1.js 模块内容 分别暴露
      /*       import * as m1 from "./src/js/m1.js";
      // 将m1.js下暴露的内容全部都存在 m1 对象中
      console.log(m1);
      console.log(m1.school);
      m1.teach();

      // 引入 m2.js 模块内容 统一暴露
      import * as m2 from "./src/js/m2.js";
      console.log(m2);
      m2.play();

      // 引入 m3.js 模块内容 默认暴露
      import * as m3 from "./src/js/m3.js";
      console.log(m3);
      m3.default.say();
      console.log(m3.default.name); */

      // 2. 解构赋值形式
      // 导入 分别暴露 模块内容
      /* import { school, teach } from "./src/js/m1.js";
      console.log(school);
      teach();

      // 导入 统一暴露 模块内容
      import { school as sc, play } from "./src/js/m2.js";
      console.log(sc); // as 取别名      
      play();

      // 导入 默认暴露 模块内容
      import {default as m3} from "./src/js/m3.js"; // 固定格式
      console.log(m3);
      m3.say(); */

      // 3.简便形式(只能用于默认暴露)
      /* import m3 from "./src/js/m3.js";
      console.log(m3);
      m3.say(); */
    </script>
    <script src="./src/js/app.js" type="module"></script>
  </body>
</html>
